////////////////////////////////////////////////////////////////////
//                          _ooOoo_                               //
//                         o8888888o                              //
//                         88" . "88                              //
//                         (| ^_^ |)                              //
//                         O\  =  /O                              //
//                      ____/`---'\____                           //
//                    .'  \\|     |//  `.                         //
//                   /  \\|||  :  |||//  \                        //
//                  /  _||||| -:- |||||-  \                       //
//                  |   | \\\  -  /// |   |                       //
//                  | \_|  ''\---/''  |   |                       //
//                  \  .-\__  `-`  ___/-. /                       //
//                ___`. .'  /--.--\  `. . ___                     //
//              ."" '<  `.___\_<|>_/___.'  >'"".                  //
//            | | :  `- \`.;`\ _ /`;.`/ - ` : | |                 //
//            \  \ `-.   \_ __\ /__ _/   .-` /  /                 //
//      ========`-.____`-.___\_____/___.-`____.-'========         //
//                           `=---='                              //
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        //
//             佛祖保佑       永不宕机      永无BUG                 //
////////////////////////////////////////////////////////////////////



// 1、导入css路径模板【只能用这三个css文件，如果要修改，请用行内式css对单个元素进行修改】
import '../static/assets/bootstrap/css/bootstrap.min.css';
import '../static/assets/fonts/ionicons.min.css';
import '../static/assets/css/pikaday.min.css';


return (
    <div>
        {/* 2、导航栏模板     nav标签 */}
        <nav className="navbar navbar-expand-lg fixed-top portfolio-navbar gradient navbar-dark">
            <div className="container">
                <button className="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse">
                    <span className="visually-hidden">
                        Toggle navigation
                    </span>
                    <span className="navbar-toggler-icon" />
                </button>
                <div className="collapse navbar-collapse" id="navbarNav">
                    <ul className="navbar-nav ms-auto">
                        <li className="nav-item" data-target="page1" >
                            <Link to={`/user/${address}`}>首页</Link>         {/* 跳转的路径会有变化，具体看分路由的代码 */}
                        </li>
                        <li className="nav-item" data-target="page2">
                            <Link to={`/user/${address}/JoinActivity`}>参加活动</Link>     {/* 跳转的路径会有变化，具体看分路由的代码 */}
                        </li>
                        <li className="nav-item" data-target="page3">
                            <Link to={`/user/${address}/User_uploadMaterial`}>上传材料</Link>      {/* 跳转的路径会有变化，具体看分路由的代码 */}
                        </li>
                        <li className="nav-item" data-target="page5">
                            <Link to={`/user/${address}`}>查询积分</Link>        {/* 跳转的路径会有变化，具体看分路由的代码 */}
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        {/* 3、主体页面模板   main标签 */}
        <main className="page hire-me-page">
            <section className="portfolio-block hire-me">
                <div className="container">

                    {/*模板1： 大显示框（输入框类）     div标签中类名全部为 class="mb-3" */}
                    <div class="mb-3">     {/* 【【【在外层一定要有一个div标签包裹整个表单】】】 */}

                        {/* 小输入框（text文本类型）  div标签中类名也为 class="mb-3" */}
                        <div className="mb-3">
                            <label className="form-label" htmlFor="name">用户名</label>

                            {/*【【【注意修改标签中的其他属性】】】 我们没有使用表单提交，而是使用onChange事件，而是使用value属性来绑定数据，同时，onChange事件中，target.value就是输入框中的值。*/}

                            <input className="form-control item" id="name" type="text" placeholder="用户名" value={userName} onChange={(e) => setUserName(e.target.value)} />
                        </div>

                        {/* 小输入框（password密码类型）  div标签中类名也为 class="mb-3" */}
                        <div className="mb-3">
                            <label className="form-label" htmlFor="password">密码</label>
                            <input className="form-control item" id="password" type="password" placeholder="密码" value={password} onChange={(e) => setPassword(e.target.value)} />
                        </div>

                        {/* 小单选框   div标签中类名也为 class="mb-3"*/}
                        <div className="mb-3">
                            <label className="form-label" htmlFor="subject">性别</label>
                            <select className="form-select" id="subject" value={gender} onChange={(e) => setGender(e.target.value === 'true')}>
                                <option value="true">男</option>
                                <option value="false">女</option>
                            </select>
                        </div>

                        {/* 按钮  div类名为className="mb-3 mt-4" */}
                        <div className="mb-3 mt-4">
                            <button className="btn btn-primary btn-lg d-block w-100" onClick={RegisterAdmin}>注册</button>
                        </div>

                    </div>

                    {/*模板2： 大显示框（列表类）     div标签中类名全部为 class="mb-3" */}
                    <div className="mb-3">

                        {/* 表格标题 */}
                        <h2>用户列表信息</h2>

                        {/* 表格    表格的行和列的样式都通过行内样式的方式来设置，而不是通过类名来设置。*/}

                        {/* 表头   th标签    行内式css模板 */}
                        {/* <th style={{ backgroundColor: '#f2f2f2', borderBottom: '1px solid #ddd', color: 'black', padding: '8px', textAlign: 'center' }}>姓名</th> */}
                        {/* 表内   td标签    行内式css模板 */}
                        {/* <td style={{ borderBottom: '1px solid #ddd', padding: '8px', textAlign: 'center' }}>{user.userName}</td> */}

                        {userList.length > 0 ? (
                            <table style={{ borderCollapse: 'collapse', margin: '1em 0', width: '100%' }}>
                                <thead>
                                    <tr>
                                        <th style={{ backgroundColor: '#f2f2f2', borderBottom: '1px solid #ddd', color: 'black', padding: '8px', textAlign: 'center' }}>姓名</th>
                                        <th style={{ backgroundColor: '#f2f2f2', borderBottom: '1px solid #ddd', color: 'black', padding: '8px', textAlign: 'center' }}>性别</th>
                                        <th style={{ backgroundColor: '#f2f2f2', borderBottom: '1px solid #ddd', color: 'black', padding: '8px', textAlign: 'center' }}>手机号</th>
                                        <th style={{ backgroundColor: '#f2f2f2', borderBottom: '1px solid #ddd', color: 'black', padding: '8px', textAlign: 'center' }}>积分</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {userList.map(user => (
                                        <tr key={user.id}>
                                            <td style={{ borderBottom: '1px solid #ddd', padding: '8px', textAlign: 'center' }}>{user.userName}</td>
                                            <td style={{ borderBottom: '1px solid #ddd', padding: '8px', textAlign: 'center' }}>{user.gender ? '男' : '女'}</td>
                                            <td style={{ borderBottom: '1px solid #ddd', padding: '8px', textAlign: 'center' }}>{user.phone}</td>
                                            <td style={{ borderBottom: '1px solid #ddd', padding: '8px', textAlign: 'center' }}>{user.nowPoint.toString()}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        ) : (
                            <p>No user information available.</p>
                        )}

                        {/* 按钮 */}
                        <div className="mb-3 mt-4">
                            <button className="btn btn-primary btn-lg d-block w-100" onClick={GetAllUsers}>查询用户列表信息</button>
                        </div>

                    </div>

                </div>
            </section>
        </main>


    </div>
);